<template>
  <teleport to="body">
    <div v-if="isOpen" class="modal">
      <div>
        <slot>

        </slot>
        <el-button @click="close">关闭</el-button>
      </div>
    </div>
  </teleport>
</template>
<script setup>

import { ref } from 'vue'

const isOpen = ref(false)

const open = () => {
  isOpen.value = true
}
const close = () => {
  isOpen.value = false
}
defineExpose({
  open,
  close
})
</script>

<style scoped>
.modal{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal div{
  background-color: #fff;
  padding: 20px;
}
</style>
